<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加资源</legend>
</fieldset>
<div class="layui-form-item">
    <div class="layui-inline" >
        <form class="layui-form"  >
            <div class="layui-form-item">
                <label class="layui-form-label">上级资源：</label>
                <div class="layui-input-inline">
                    <input type="text"  id="tree" lay-filter="tree" class="layui-input" />
                    <input hidden="true" id="parentid" name="parentid" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required|name" lay-reqtext="资源名称不能为空"   placeholder="资源名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源路径</label>
                <div class="layui-input-inline">
                    <input type="input" name="url"  placeholder="请填写资源路径"  class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源权限字段</label>
                <div class="layui-input-inline">
                    <input type="text" name="permission" lay-verify="required"  placeholder="例:sys:user:query" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="delflag" value="0" title="启用" checked="">
                    <input type="radio" name="delflag" value="1" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" title="按钮" checked="">
                    <input type="radio" name="type" value="0" title="菜单">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="permissionForm">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script  src="../../../layui/layui.js" ></script>
<script src="../../../layui/layui.all.js"  ></script>
<script src="../../../js/jquery.min.js"></script>

<script>
    layui.config({
        base: '../../../layui/'
    }).extend({
        treetable: 'treeSelect'
    }).use(["treeSelect", "form", "tree"], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        form.render('select');
        var treeSelect = layui.treeSelect;
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/sysPer/treeSelect/',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '上级菜单',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            showCheckbox: true,     //是否显示复选框

            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            click: function(d){
                console.log(d);
                $("#parentid").attr("value",d.current.id);
            },
            // 加载完成后的回调函数
            success: function (d) {
//                获取zTree对象，可以调用zTree方法
                var treeObj = treeSelect.zTree('tree');
                console.log(treeObj);

            }
        });

        //监听提交
        form.on('submit(permissionForm)', function(data){
            console.log(data.field);
            $.ajax({
                url:"/sysPer/savePermission",
                method:"post",
                data:data.field,
                success:function(data){
                    if(data.code== 404 ){
                        layer.msg(data.msg);
                    }else {
                        layer.msg(data.msg);
                        setTimeout(function(){
                            layer.close(layer.index);
                            window.parent.location.reload();
                        },1800 );

                    }
                }
            });
        });
    })
</script>
</body>
</html>